<template>
  <div class="customer-management-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>客户管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate">新建客户</el-button>
            <el-upload
              class="upload-btn"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
            >
              <el-button type="primary">导入客户</el-button>
            </el-upload>
            <el-button type="primary" @click="handleExport">导出客户</el-button>
          </div>
        </div>
      </template>

      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="客户编码">
          <el-input v-model="queryForm.code" placeholder="请输入客户编码" />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="queryForm.name" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select
            v-model="queryForm.type"
            placeholder="请选择客户类型"
            clearable
          >
            <el-option label="直销客户" value="direct" />
            <el-option label="经销商" value="dealer" />
            <el-option label="代理商" value="agent" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="等级">
          <el-select
            v-model="queryForm.level"
            placeholder="请选择等级"
            clearable
          >
            <el-option label="战略客户" value="strategic" />
            <el-option label="重要客户" value="important" />
            <el-option label="普通客户" value="normal" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="正常" value="normal" />
            <el-option label="禁用" value="disabled" />
            <el-option label="黑名单" value="blacklist" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="联系人信息" name="contacts">
                <!-- 联系人列表和操作 -->
                <div class="contact-header">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddContact(props.row)"
                  >
                    新增联系人
                  </el-button>
                </div>
                <el-table :data="props.row.contacts" border>
                  <el-table-column prop="name" label="姓名" width="120" />
                  <el-table-column prop="position" label="职位" width="120" />
                  <el-table-column prop="phone" label="电话" width="150" />
                  <el-table-column prop="email" label="邮箱" min-width="180" />
                  <el-table-column prop="department" label="部门" width="120" />
                  <el-table-column prop="isMain" label="主要联系人" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.isMain ? 'success' : 'info'">
                        {{ scope.row.isMain ? "是" : "否" }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        @click="handleEditContact(props.row, scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        link
                        type="danger"
                        @click="handleDeleteContact(props.row, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="收货地址" name="addresses">
                <!-- 收货地址列表和操作 -->
                <div class="address-header">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddAddress(props.row)"
                  >
                    新增地址
                  </el-button>
                </div>
                <el-table :data="props.row.addresses" border>
                  <el-table-column prop="name" label="地址名称" width="150" />
                  <el-table-column prop="contact" label="联系人" width="120" />
                  <el-table-column prop="phone" label="联系电话" width="150" />
                  <el-table-column
                    prop="address"
                    label="详细地址"
                    min-width="300"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="isDefault"
                    label="默认地址"
                    width="100"
                  >
                    <template #default="scope">
                      <el-tag :type="scope.row.isDefault ? 'success' : 'info'">
                        {{ scope.row.isDefault ? "是" : "否" }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        @click="handleEditAddress(props.row, scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        link
                        type="danger"
                        @click="handleDeleteAddress(props.row, scope.row)"
                        >删除</el-button
                      >
                      <el-button
                        v-if="!scope.row.isDefault"
                        link
                        type="primary"
                        @click="handleSetDefaultAddress(props.row, scope.row)"
                        >设为默认</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="信用信息" name="credit">
                <!-- 信用信息展示和操作 -->
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="信用额度">
                    {{ props.row.credit.limit }}
                  </el-descriptions-item>
                  <el-descriptions-item label="已用额度">
                    {{ props.row.credit.used }}
                  </el-descriptions-item>
                  <el-descriptions-item label="信用评级">
                    <el-tag :type="getCreditLevelType(props.row.credit.level)">
                      {{ props.row.credit.level }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="账期(天)">
                    {{ props.row.credit.paymentTerm }}
                  </el-descriptions-item>
                </el-descriptions>

                <div class="credit-history mt-20">
                  <div class="section-title">信用记录</div>
                  <el-table :data="props.row.credit.history" border>
                    <el-table-column prop="date" label="日期" width="120" />
                    <el-table-column prop="type" label="类型" width="120">
                      <template #default="scope">
                        <el-tag :type="getCreditHistoryType(scope.row.type)">
                          {{ getCreditHistoryTypeText(scope.row.type) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="120" />
                    <el-table-column
                      prop="operator"
                      label="操作人"
                      width="120"
                    />
                    <el-table-column
                      prop="remark"
                      label="备注"
                      min-width="200"
                      show-overflow-tooltip
                    />
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane label="销售记录" name="sales">
                <!-- 销售记录列表 -->
                <el-table :data="props.row.sales" border>
                  <el-table-column prop="date" label="日期" width="120" />
                  <el-table-column
                    prop="orderNo"
                    label="订单编号"
                    width="180"
                  />
                  <el-table-column prop="amount" label="金额" width="120" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getOrderStatusType(scope.row.status)">
                        {{ getOrderStatusText(scope.row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="paymentStatus"
                    label="付款状态"
                    width="100"
                  >
                    <template #default="scope">
                      <el-tag
                        :type="getPaymentStatusType(scope.row.paymentStatus)"
                      >
                        {{ getPaymentStatusText(scope.row.paymentStatus) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        @click="handleViewOrder(scope.row)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>

        <el-table-column prop="code" label="客户编码" width="120" />
        <el-table-column prop="name" label="客户名称" min-width="150" />
        <el-table-column prop="type" label="客户类型" width="100">
          <template #default="scope">
            <el-tag>{{ getCustomerTypeText(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="客户等级" width="100">
          <template #default="scope">
            <el-tag :type="getCustomerLevelType(scope.row.level)">
              {{ getCustomerLevelText(scope.row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="所属区域" width="120" />
        <el-table-column prop="industry" label="所属行业" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getCustomerStatusType(scope.row.status)">
              {{ getCustomerStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              link
              :type="scope.row.status === 'normal' ? 'danger' : 'success'"
              @click="handleToggleStatus(scope.row)"
              >{{ scope.row.status === "normal" ? "禁用" : "启用" }}</el-button
            >
            <el-button link type="primary" @click="handleViewHistory(scope.row)"
              >历史</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 客户表单对话框 -->
      <!-- ... 省略客户表单对话框的具体实现 ... -->

      <!-- 联系人表单对话框 -->
      <!-- ... 省略联系人表单对话框的具体实现 ... -->

      <!-- 地址表单对话框 -->
      <!-- ... 省略地址表单对话框的具体实现 ... -->

      <!-- 历史记录对话框 -->
      <!-- ... 省略历史记录对话框的具体实现 ... -->
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// ... 省略状态定义和方法实现 ...

// 获取客户类型文本
const getCustomerTypeText = (type) => {
  const map = {
    direct: "直销客户",
    dealer: "经销商",
    agent: "代理商",
    other: "其他",
  };
  return map[type] || type;
};

// 获取客户等级类型
const getCustomerLevelType = (level) => {
  const map = {
    strategic: "danger",
    important: "warning",
    normal: "info",
  };
  return map[level] || "";
};

// 获取客户等级文本
const getCustomerLevelText = (level) => {
  const map = {
    strategic: "战略客户",
    important: "重要客户",
    normal: "普通客户",
  };
  return map[level] || level;
};

// 获取客户状态类型
const getCustomerStatusType = (status) => {
  const map = {
    normal: "success",
    disabled: "info",
    blacklist: "danger",
  };
  return map[status] || "";
};

// 获取客户状态文本
const getCustomerStatusText = (status) => {
  const map = {
    normal: "正常",
    disabled: "禁用",
    blacklist: "黑名单",
  };
  return map[status] || status;
};

// 获取信用等级类型
const getCreditLevelType = (level) => {
  const map = {
    AAA: "success",
    AA: "success",
    A: "warning",
    BBB: "warning",
    BB: "warning",
    B: "danger",
    CCC: "danger",
    CC: "danger",
    C: "danger",
  };
  return map[level] || "info";
};

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const map = {
    pending: "info",
    processing: "warning",
    completed: "success",
    cancelled: "danger",
  };
  return map[status] || "";
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const map = {
    pending: "待处理",
    processing: "处理中",
    completed: "已完成",
    cancelled: "已取消",
  };
  return map[status] || status;
};

// 获取付款状态类型
const getPaymentStatusType = (status) => {
  const map = {
    unpaid: "danger",
    partial: "warning",
    paid: "success",
  };
  return map[status] || "";
};

// 获取付款状态文本
const getPaymentStatusText = (status) => {
  const map = {
    unpaid: "未付款",
    partial: "部分付款",
    paid: "已付款",
  };
  return map[status] || status;
};

// 导入相关方法
const beforeUpload = (file) => {
  const isExcel =
    file.type ===
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    file.type === "application/vnd.ms-excel";
  if (!isExcel) {
    ElMessage.error("只能上传 Excel 文件!");
    return false;
  }
  return true;
};

const handleUploadSuccess = (response) => {
  if (response.success) {
    ElMessage.success("导入成功");
    handleSearch();
  } else {
    ElMessage.error(response.message || "导入失败");
  }
};

// 导出方法
const handleExport = () => {
  // 实现导出逻辑
  ElMessage.success("导出成功");
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.customer-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.contact-header,
.address-header {
  margin-bottom: 10px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.ml-5 {
  margin-left: 5px;
}

.dialog-footer {
  text-align: right;
}
</style>
